svg形式のテキストを画像にするserverless function

repo

APIの書式

https://svg-hosting.vercel.app/api/svg?url=$url

https://svg-hosting.vercel.app/scrapbox.io/$project/$page/$filename

用途

実装

2020-12-03 03:06:18 うまく動いていない

03:15:20 serverless functionの作動テスト終了

03:47:09 code書いた

簡単に書けた

03:55:34 deploy終了

error処理とかは全然してない

とりあえず動く

04:08:57 scrapbox向けに使えるoptionを用意する？

04:25:29 用意した

バグ

2022-01-13

known issue

ページ名が変わるとリンク切れになる

private projectに書いたsvgは無理

認証が足りない

テスト

Animationも出せる！！

https://svg-hosting.vercel.app/api/svg?url=https://scrapbox.io/api/code/takker/svg形式のテキストを画像にするserverless_function/test2.svg

https://svg-hosting.vercel.app/api/svg?url=https://twemoji.maxcdn.com/2/svg/1f980.svg

テキストだとうまく行かない？

preview deployでは画像がちゃんと返却されたんだけどな？

渡すurlを間違えているだけだった

https://svg-hosting.vercel.app/api/svg?url=https://scrapbox.io/api/code/takker/svg形式のテキストを画像にするserverless_function/test1.svg

https://svg-hosting.vercel.app/scrapbox.io/takker/svg形式のテキストを画像にするserverless_function/dangerousSvg.svg

新しいタブで画像を開くと実行されるみたい

Scrapboxだけで見る分には問題なさそう

code:dangerousSvg.svg

<circle cx="50" cy="50" r="50" fill="red"/>

<foreignObject>

<script>alert("hello!");</script>

</foreignObject>

</svg>

code:test1.svg

<!--

パスコマンドや座標の区切りが判る範囲でスペースを省略，追加することが出来る．

ここではコマンド毎に改行を入れてみた．

-->

<path stroke="black" stroke-width="1" fill="none" d="

M 0 200

L 25 50

l 50 -25

V 175

H 100

v -50

h 25

m 25 0

l 50 0

L 175 175

z

"/>

</svg>

code:test2.svg

<path d="M 25 175 L 25 25" stroke="black" stroke-dasharray="2"/>

<path d="M 175 25 L 175 175" stroke="black" stroke-dasharray="2"/>

<path d="M 25 25 L 175 25" stroke="black" stroke-dasharray="2"/>

<path d="M 25 175 Q 25 25 175 25" stroke="black" stroke-dasharray="2" fill="none"/>

<path d="M 25 25 Q 175 25 175 175" stroke="black" stroke-dasharray="2" fill="none"/>

<path d="M 25 175 C 25 25 175 25 175 175" stroke="blue" fill="none"/>

<path stroke="red">

<animate attributeName="d" calcMode="linear" from="M 25 175 L 25 25" to="M 25 25 L 175 25" begin="0s" dur="6s" repeatCount="indefinite"/>

</path>

<path stroke="red">

<animate attributeName="d" calcMode="linear" from="M 25 25 L 175 25" to="M 175 25 L 175 175" begin="0s" dur="6s" repeatCount="indefinite"/>

</path>

<circle fill="red" r="5">

<animateMotion path="M 25 175 Q 25 25 175 25" begin="0s" dur="6s" calcMode="linear" repeatCount="indefinite"/>

</circle>

<circle fill="red" r="5">

<animateMotion path="M 25 25 Q 175 25 175 175" begin="0s" dur="6s" calcMode="linear" repeatCount="indefinite"/>

</circle>

<circle fill="red" r="5">

<animateMotion path="M 25 175 C 25 25 175 25 175 175" begin="0s" dur="6s" calcMode="linear" repeatCount="indefinite"/>

</circle>

</svg>

MITライセンス、著作権はdefghi1977に帰属